<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        ul {
            list-style: none;
        }

        .left {
            width: 375px;
            background: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);
            background-size: cover;
            height: 100%;
        }

        .right {
            flex: 1;
            position: relative;
        }

        .right>header {
            padding: 20px;
            height: 40px;
            line-height: 40px;
        }

        img {
            height: 100%;
        }

        .header_left {
            height: 40px;
            font-size: 26px;
            color: #333;
            float: left;
            display: flex;
        }

        .header_left p {
            margin-left: 15px;
        }

        .header_right {
            float: right;
        }

        .header_right li {
            float: left;
            margin: 0 5px;
            color: #8f8f8f;
        }

        main {
            width: 360px;
            height: 480px;
            padding: 40px 45px;
            background-color: #f5f5f5;
            position: absolute;
            left: 50%;
            top: calc(50% - 240px);
            border-radius: 10px;
        }

        main .login {
            /* display: none; */
            position: absolute;
            left: 45px;
            top: 40px;
        }

        form {
            position: absolute;
            top: 80px;
        }

        main .login>p {
            font-size: 22px;
            line-height: 40px;
            width: 44px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }

        main .login input {
            margin: 20px 0;
            width: 314px;
            padding: 30px 20px 10px;
            outline: none;
            position: relative;
            border: none;
        }

        main .login div:nth-child(1) {
            position: relative;
        }

        main .login div>p {
            position: absolute;
            left: 20px;
            top: 40px;
            transition: 0.5s;
            color: rgb(88, 88, 88);

        }

        main .login div:nth-child(2) {
            position: relative;
        }

        main .login div .focus {
            font-size: 10px;
            top: 30px !important;
            color: coral;
        }

        #login {
            width: 100%;
            height: 50px;
            background-color: #ff7f298c;
            color: white;
            font-size: 20px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
        }

        main .enroll {
            position: absolute;
            left: 45px;
            top: 40px;
        }

        main .enroll form {
            display: none;
        }

        main .enroll>p {
            color: #cecece;
            font-size: 22px;
            line-height: 40px;
            position: relative;
        }

        main .enroll input {
            margin: 20px 0;
            width: 314px;
            padding: 30px 20px 10px;
            outline: none;
            position: relative;
            border: none;
        }

        main .enroll div:nth-child(1) {
            position: relative;
        }

        main .enroll div>p {
            position: absolute;
            left: 20px;
            top: 40px;
            transition: 0.5s;
            user-select: none;
            color: rgb(88, 88, 88);

        }

        main .enroll div:nth-child(2) {
            position: relative;
        }

        main .enroll div .focus {
            font-size: 10px;
            top: 30px !important;
            color: coral;
        }

        .enroll p {
            position: absolute;
            left: 70px;
            top: 0;
        }

        .before {
            width: 44px;
            height: 5px;
            border-radius: 3px 3px 3px 3px;
            position: absolute;
            top: 80px;
            left: 45px;
            background-color: coral;
            transition: .3s;
        }

        main span {
            position: absolute;
            left: 5px;
            color: red;
            top: -5px;
            display: block;
            font-size: 12px;
            display: none;
        }

        main form>div:nth-child(3) {
            position: relative;
        }

        main form>div:nth-child(3) p {
            position: absolute;
            left: 20px;
            top: 40px;
            transition: 0.5s;
            user-select: none;
            color: rgb(88, 88, 88);
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right">
        <header>
            <div class="header_left">
                <img src="	https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
                <p>小米账号</p>
            </div>
            <ul class="header_right">
                <li>用户协议</li>
                <li>隐私政策</li>
                <li>帮助中心</li>
                <li>中文</li>
    </div>
    </header>
    <main>

        <div class="login">
            <p>登录</p>
            <form action="">
                <div>
                    <input type="text" class="text">
                    <p>用户名</p>
                    <span>用户名格式不正确</span>
                </div>

                <div><input type="password" class="password">
                    <p>密码</p>
                    <span>密码格式不正确</span>
                </div>
                <button id="login">登录一下</button>
            </form>
        </div>
        <div class="enroll">
            <p>注册</p>
            <form action="">
                <div>
                    <input type="text" class="text">
                    <p>用户名</p>
                    <span>用户名格式不正确</span>
                </div>
                <div><input type="password" class="password">
                    <p>密码</p>
                    <span>密码(以字母开头，长度在6~18之间，只能包含字母数字)</span>
                </div>
                <div><input type="password" class="password">
                    <p>确认密码</p>
                    <span>两次密码不一致</span>
                </div>
                <button id="login">注册</button>
            </form>
        </div>
        <div class="before"></div>
    </main>
    </div>
    <script>
        //基于axios对get请求的封装
        function AG(url, params) {
            return axios({
                baseURL: 'http://localhost:8888',
                url,
                params,
            })
        }
        AG('test/third', { name: 'wangkejian', age: 26 }).then(resData => {
            // console.log(resData.data);
        })
        //基于axios的post请求的封装
        function AP(url, data) {
            return axios({
                baseURL: 'http://localhost:8888',
                method: 'post',
                url,
                data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

            })
        }
        AP('/test/fourth', { name: 'wangkejian', age: 26 }).then(resData => {
            // console.log(resData.data);
        })
        var texts = document.querySelectorAll(".text")
        var passwords = document.querySelectorAll(".password")
        toggleInput(0, "login")
        toggleInput(1, "enroll")
        function toggleInput(index, name) {
            var click = document.querySelectorAll("button")[index]
            click.disabled = true
            var loginText = texts[index]
            var textPlaceholder = document.querySelector(`.${name} div:nth-child(1) p`)
            var textError = document.querySelector(`.${name} div:nth-child(1) span`)
            var regText = /^[a-z0-9]\w{4,11}$//* 用户名 */
            var regPassword = /\w{6,12}//* 密码 用于匹配的是由6到12个连续的字母、数字或下划线组成的字符串*/

            var loginPassword = passwords[index]
            var passwordPlaceholder = document.querySelector(`.${name} div:nth-child(2) p`)
            var passwordError = document.querySelector(`.${name} div:nth-child(2) span`)
            loginText.addEventListener("focus", () => {
                textPlaceholder.className = 'focus'
            })
            loginText.addEventListener("blur", () => {
                if (loginText.value == "") {
                    textPlaceholder.className = ''
                }
                if (regText.test(loginText.value)) {
                    textError.style.display = "none"
                } else {
                    textError.style.display = "block"
                }


            })
            loginText.addEventListener("input", () => {
                if (!loginPassword.value == "" && !loginText.value == "") {
                    click.style.backgroundColor = "red"
                }
                if (regText.test(loginText.value) && regPassword.test(loginPassword.value)) {
                    click.disabled = false
                }
                else {
                    click.disabled = true
                }
            })

            loginPassword.addEventListener("focus", () => {
                passwordPlaceholder.className = 'focus'
            })
            loginPassword.addEventListener("blur", () => {
                if (loginPassword.value == "") {
                    passwordPlaceholder.className = ''
                }
                if (regPassword.test(loginPassword.value)) {
                    passwordError.style.display = "none"
                } else {
                    passwordError.style.display = "block"
                }
            })
            loginPassword.addEventListener("input", () => {
                if (!loginPassword.value == "" && !loginText.value == "") {
                    click.style.backgroundColor = "red"
                }
                console.log();
                if (regText.test(loginText.value) && regPassword.test(loginPassword.value)) {
                    click.disabled = false
                } else {
                    click.disabled = true
                }
            })
            click.onclick = () => {
                event.preventDefault();
                if (index == 0) {
                    AP('/users/login', { username: loginText.value, password: loginPassword.value }).then(resData => {

                        localStorage.setItem('username', resData.data.user.username)
                        localStorage.setItem('userid', resData.data.user.id)
                        localStorage.setItem('token', resData.data.token)
                        window.location.href = 'index.html';
                    })
                } else {
                    AP('/users/register', { username: loginText.value, password: loginPassword.value, rpassword: loginPassword.value, nickname: loginText.value }).then(resData => {
                        alert('注册成功，请登录')
                    })

                }

            }



        }



        confirmPassword()//确认密码是否一致
        function confirmPassword() {

            let confirm = document.querySelector(".enroll form>div:nth-child(3) input")
            let password = document.querySelector(".enroll form>div:nth-child(2) input")
            var passwordPlaceholder3 = document.querySelector(`.enroll div:nth-child(3) p`)
            var passwordError3 = document.querySelector(`.enroll div:nth-child(3) span`)
            confirm.onfocus = function () {
                passwordPlaceholder3.className = 'focus'
            }
            password.addEventListener("blur", () => {
                if (confirm.value == password.value) {
                    passwordError3.style.display = "none"
                } else {
                    passwordError3.style.display = "block"
                }
            })
            confirm.addEventListener("blur", () => {
                if (confirm.value == "") {
                    passwordPlaceholder3.className = ''
                }
                if (confirm.value == password.value) {
                    passwordError3.style.display = "none"
                } else {
                    passwordError3.style.display = "block"
                }
            })
        }

        var login = document.querySelector(".login>p");
        var enroll = document.querySelector(".enroll>p");
        var loginForm = document.querySelector("main .login form");
        var enrollForm = document.querySelector("main .enroll form");
        var before = document.querySelector('.before')
        enroll.addEventListener('click', () => {
            before.style.left = "115px"
            login.style.color = "#cecece"
            enroll.style.color = "black"
            loginForm.style.display = "none";
            enrollForm.style.display = "block";
        });
        login.addEventListener('click', () => {
            before.style.left = "45px"
            enroll.style.color = "#cecece"
            login.style.color = "black"
            loginForm.style.display = "block";
            enrollForm.style.display = "none";
        });




    </script>
</body>

</html>